<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%@taglib prefix="my" uri="/myTags"  %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<!-- meta -->
<meta name="keywords" content="">
<meta name="description" content="">

<!-- JQuery 用 -->
<link href="<%= request.getContextPath() %>/common/css/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="<%= request.getContextPath() %>/common/js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="<%= request.getContextPath() %>/common/js/jquery-ui-1.8.9.custom.min.js" type="text/javascript"></script>
<script src="<%= request.getContextPath() %>/common/js/jquery.cookie.js" type="text/javascript"></script>
<script src="<%= request.getContextPath() %>/common/js/jquery.form.js" type="text/javascript"></script>
<script src="<%= request.getContextPath() %>/common/js/jquery.treeview.js" type="text/javascript"></script>
<link rel="stylesheet" href="<%= request.getContextPath() %>/common/css/jquery.treeview.css" type="text/css" />
<!-- /meta -->
<title>出力フォーマット設計</title>
<link rel="stylesheet" type="text/css" href="<%= request.getContextPath() %>/common/css/base.css">
<link rel="stylesheet" type="text/css" href="<%= request.getContextPath() %>/common/css/headerfooter.css">
<link rel="stylesheet" type="text/css" href="<%= request.getContextPath() %>/common/css/ulol.css">
<link rel="stylesheet" type="text/css" href="<%= request.getContextPath() %>/common/css/arrow.css">
<link rel="stylesheet" type="text/css" href="<%= request.getContextPath() %>/common/css/elements.css">
<link rel="stylesheet" type="text/css" href="<%= request.getContextPath() %>/common/css/elements_admin.css">
<!-- admin -->
<link rel="stylesheet" type="text/css" href="<%= request.getContextPath() %>/common/css/base_admin.css">
<!-- /admin -->
<script type="text/javascript" src="<%= request.getContextPath() %>/common/js/library.js"></script>
<link rel="stylesheet" type="text/css" href="<%= request.getContextPath() %>/common/css/for_winie3.css">
<script type="text/javascript" src="<%= request.getContextPath() %>/common/js/dtree.js"></script>
<style type="text/css">
	.ui-resizable-helper { border: 2px dotted #00F; }
	.ui-resizable-e { cursor:e-resize; width:2px; right:0px; top:0px; height:100%; background-color:white; }

	div.main {
	  width: 1500px;
	}
	div.fieldlistcls {
	  margin-right:15px;
	  float: left;
	  width: 310px;
	}
	div.structurecls {
	  border: 1px solid #aaaaaa;
	  float: left;
	  margin:15px;
	  width: 750px;
	  height: 550px;
	  overflow: auto;
	}

	div.attrcls {
	  border: 1px solid #aaaaaa;
	  float: left;
	  margin:15px;
	  width: 250px;
	}

	.tableA01{
	padding-top:2px;
	padding-bottom:2px;

}

	div .main table{
		border-collapse:collapse;
		border-width:1px 0 0 1px;
		border-style:solid;
		border-color:#cccccc;
		background-color:#ffffff;
	}

	div .main th{
		border-width:0 1px 1px 0;
		border-style:solid;
		border-color:#cccccc;
		text-align:left;
		font-size:15px;
		vertical-align:middle;
	}

	div .main td{
		border-width:0 1px 1px 0;
		border-style:solid;
		border-color:#cccccc;
		background-color:#ffffff;

		font-size:15px;
		word-break: break-all;
	}


	div .main .lv{
		font-size:15px;
		background-color:#E6E6E6;
		font-weight:normal;
	}

	div .main .lv2{
		font-size:11px;
		background-color:#F5F5F5;
		font-weight:normal;
	}

	.xmltreecls ul{
	list-style-type: none;
	padding: 0px;
	margin: 0px;
	}
	.xmltreecls li{
	list-style-type: none;
	padding: 0px;
	margin: 0px;
	}


</style>
<script type="text/javascript">

var displayTagId;
var genzaiFocusObj;
var divScrollTop;

$(function() {
	$("#xmltree").treeview({
		collapsed: false,
        animated: "normal",
        persist: "cookie",
        cookieId: "schemaCookie${keySchemaid}"
   });

	displayTagId = $("#displayTagId").val();
	attrAllHiddenExec();

	$(".attrinputcls").focus(focusCallback);
	$(".attrBtn").click(attrBtnCallback);


})

	function focusCallback() {

		genzaiFocusObj = $(this);

	}

	function attrBtnCallback() {

		$(".attrBtn").each(function(){
			//	alert($(this).html());
			    $(this).attr("disabled", "");
			});

		$(this).attr("disabled", "disabled");

	}

	//子ノードを追加する
	function createChild(oyaTagId, type) {

		var args = { "targetTagId" : oyaTagId, "insertType" : type };

		ajaxRequest(args, "<%= request.getContextPath() %>/outputconv/addChild?");
	}

	//子ノードを削除する
	function deleteChild(tagId) {

		var args = { "targetTagId" : tagId};

		ajaxRequest(args, "<%= request.getContextPath() %>/outputconv/delChild?");

	}
	//順番を変える
	function orderChange(tagId) {

		var args = { "targetTagId" : tagId};

		ajaxRequest(args, "<%= request.getContextPath() %>/outputconv/orderChange?");

	}

	//プロパティーを表示する
	function displayProperty(tagId) {

		displayTagId = tagId;
		//attrclass
		attrAllHiddenExec(true);

	}

	//属性表示
	function attrAllHiddenExec(animate) {

		$(".attrclass").each(function(){
		//	alert($(this).html());
		    $(this).hide();
		});
		if (animate) {
			$("#attr" + displayTagId).slideDown("slow");
		} else {
			$("#attr" + displayTagId).show();
		}

	}
	//貼り付け
	function paste(text) {

		if (genzaiFocusObj) {
			var beforeText = genzaiFocusObj.val();

			genzaiFocusObj.val(beforeText + "{" + text + "}");
		} else {
			alert('フォーカスがないです');
		}


	}

	//属性を追加する
	function addAttr(tagId) {

		var args = { "targetTagId" : tagId};

		ajaxRequest(args, "<%= request.getContextPath() %>/outputconv/addAttr?");
	}
	//属性を削除する
	function delAttr(tagId, index) {

		var args = { "targetTagId" : tagId, "delAttrIndex" : index};

		ajaxRequest(args, "<%= request.getContextPath() %>/outputconv/delAttr?", index);
	}

	//非同期通信を行う
	function ajaxRequest(args, actionUrl, delAttrIndex) {


		console.log($("#structure").scrollTop());
		divScrollTop = $("#structure").scrollTop();

		$("#targetTagId").val(args.targetTagId);

		if (args.insertType) {
			$("#insertType").val(args.insertType);
		}

		if (args.delAttrIndex) {
			$("#delAttrIndex").val(args.delAttrIndex);
		}

		$('#getAjaxForm').clearForm();
		$("#getAjaxForm").append($('#ajaxFrame').clone());
		var queryString = $('#getAjaxForm').formSerialize();
		//$.get(actionUrl + queryString, postProcess);
		//alert(queryString);

		disabledObjArray = [];
		$("input:button").each(
				function(i, elem) {

					$(elem).attr("disabled", "disabled");
				}
		);

		$.ajax({
	        type:"post",
	        url: actionUrl,
	        data : queryString ,
	        success: postProcess});
	}


	function postProcess(data) {
		//alert(data);
		$('#getAjaxForm').empty();
		$('#ajaxFrame').empty();
		$('#ajaxFrame').html(data);
		$("#xmltree").treeview({
			collapsed: false,
	        animated: "normal",
	        persist: "cookie",
	        cookieId: "schemaCookie${keySchemaid}"
	   });

		attrAllHiddenExec();
		$(".attrinputcls").focus(focusCallback);
		$(".attrBtn").click(attrBtnCallback);
		$("input:button").each(
				function(i, elem) {
					$(elem).attr("disabled", "");
				}
		);

		$('#attrBtn' + displayTagId).attr("disabled", "disabled");
		$("#structure").scrollTop(divScrollTop)
	}



</script>

</head>
<body id="dch">

<div style="display: none;">
	<form id="getAjaxForm" action="<%= request.getContextPath() %>/outputconv/addChild" method="post">
	</form>
</div>

<!-- === headerArea === -->
<div id="headerArea">
<a name="pageTop" id="pageTop"></a>
<jsp:include page="/common/include/header.jsp" />
</div><!-- === /headerArea === -->

<!-- === mainArea === -->
<div id="mainArea">
<table border="0" cellspacing="0" cellpadding="0" width="100%">
	<tr valign="top">
		<td width="140" id="leftArea">
			<jsp:include page="output_menu.jsp" />
			<!-- /listA01 -->
		<!-- === /leftArea === -->
		</td>
		<td width="20"><img src="<%= request.getContextPath() %>/common/images/spacer.gif" width="20" height="4" border="0" alt=""></td>
		<td id="contentsArea">
		<!-- === contentsArea === -->
			<!-- headingLv01Block -->
			<div class="headingLv01Block">
				<!-- headingLv01 -->
				<h1>出力フォーマット設計</h1>
				<!-- /headingLv01 -->
				<!-- lead -->

				<!-- /lead -->
			</div>
			<div class="columnB01">
			 <s:fielderror/>
			 <s:actionerror/>
			 <s:actionmessage/>
			</div>
			<!-- headingLv02 -->
			<div class="headingLv02">
			<table border="0" cellspacing="0" cellpadding="5" width="558">
				<tr>
					<td><p><em>出力フォーマット設計<br></em></p></td>
				</tr>
			</table>
			</div>
			<!-- /headingLv02 -->
			<form action="<%= request.getContextPath() %>/outputconv/execute" method="post" id="addForm" name="addForm">
			<s:hidden name="keySchemaid"/>
			<s:hidden name="displayTagId"/>
			<s:token/>
			<!-- tableBlock -->
			<div class="tableBlock">
				<div class="main">
					<div class="fieldlistcls" id ="fieldlist">
						<table style="width: 310px;" border="1" cellspacing="0" cellpadding="5" id="metaTbl">
						<tr>
							<th class="lv" style="width: 240px;" colspan="3">項目</th>
							<th class="lv" style="width: 70px;">キー</th>
						</tr>
						<tr>
							<td colspan="5">
								<div style="height:545px; width: 310px; overflow-y: auto; overflow-x: hidden;">
									<table style="width: 310px;">
										<s:iterator value="define.list" status="stat">
										<tr>
											<s:set name="fieldKey" value="%{define.list[#stat.index].key}"/>
											<!--<s:if test='%{#stat.first}'>
												<th class="lv" rowspan="${rowNum}" style="width: 80px;"><s:property value="%{getGamenName()}"/></th>
											</s:if>
											<s:iterator value="itemList" status="itemStat">
												<s:if test='%{#itemStat.last}'>
													<th class="lv" style="width: 160px;"><s:property value="value" /></th>
												</s:if>

											</s:iterator>-->
											<s:iterator value="itemList" status="itemStat">
												<th class="lv2" rowspan="${rowspan}" colspan="${colspan}"><s:property value="value" /></th>
											</s:iterator>
											<th class="lv2" style="width: 70px;">

												<input style="width: 60px;" type="button"  value="貼り付け" onclick="paste('<s:property value="#fieldKey"/>')" />
											</th>
										</tr>
										</s:iterator>

										<s:iterator value="customSchemaDetailList" status="customItemStat">
										<tr>
											<th class="lv2" style="width: 160px;" colspan="3"><s:property value="fieldItemName" /></th>

											<th class="lv2" style="width: 70px;">

												<input style="width: 60px;" type="button" value="貼り付け"  onclick="paste('<s:property value="fieldKey"/>')" />
											</th>
										</tr>
										</s:iterator>
									</table>
								</div>
							</td>
						</tr>
						</table>

					</div>
					<div id = "ajaxFrame">
						<div class="structurecls" id ="structure">
							<div id= "xmlDisplay" style="width:720px;">
							<s:hidden name="targetTagId"/>
							<s:hidden name="insertType"/>
							<s:hidden name="delAttrIndex"/>
							<s:hidden name="sort"/>
							<my:xmlDisplay name="${xmlDisObj}" sort="${sort}" fieldErrors="${fieldErrors}" />
							</div>

						</div>
						<div class="attrcls" id = "attr" >

							<s:iterator value="xmlObjList" status="stat">
								<div id="attr<s:property value="tagId"/>" class="attrclass">
									<s:set name="index" value="index"/>
									<table border="1" cellspacing="0" cellpadding="5" width="250px">
									<tr>
										<th class="lv" width="30%">
											Attribute名
										</th>
										<th class="lv" width="60%">
											内容
										</th>
										<th class="lv" width="10%">
											処理
										</th>
									</tr>
									<s:iterator value="attrList" status="attrStat">
										<tr>
											<td width="30%">
												<s:textfield cssClass="attrinputcls" name="xmlObjList[%{#index}].attrList[%{#attrStat.index}].name" value="%{name}" size="10" maxlength="200" cssErrorStyle="background-color: #FFE4E1"/>
											</td>
											<td width="60%">
												<s:textfield cssClass="attrinputcls" name="xmlObjList[%{#index}].attrList[%{#attrStat.index}].value" value="%{value}" size="14"  maxlength="200" cssErrorStyle="background-color: #FFE4E1"/>
											</td>
											<td width="10%">
												<input type="button" value="削除" onclick="delAttr('<s:property value="tagId"/>','<s:property value="%{#attrStat.index}"/>')" />
											</td>
										</tr>
									</s:iterator>
									</table>
									<input type="button" value="追加" onclick="addAttr('<s:property value="tagId"/>')" />

									<table style="margin-top: 30px" border="1" cellspacing="0" cellpadding="5" width="250px">
									<tr>
										<th class="lv" >
											テキスト
										</th>
									</tr>
									<tr>
										<td>
											<s:textfield cssClass="attrinputcls" name="xmlObjList[%{#index}].text" value="%{text}" size="35" maxlength="200" cssErrorStyle="background-color: #FFE4E1"/>
										</td>
									</tr>
								</table>
								</div>

							</s:iterator>

						</div>
					</div>
				</div>
			</div>
			<!-- pageNaviC01 -->
			<div class="pageNaviC01">
			<table border="0" cellspacing="0" cellpadding="10" width="558">
				<tr>
					<td width="238" class="left">
						<p><input type="button" value="戻る" style="width:100px" onclick="location.href='<%= request.getContextPath() %>/outputconv/main'">
						<input type="submit" value="確認する" style="width:130px"></p>
					</td>
				</tr>
			</table>
			</div>
			<!-- /tableBlock -->
			</form>
		<!-- === /contentsArea === -->
		</td>
		<td width="16"><img src="<%= request.getContextPath() %>/common/images/spacer.gif" width="16" height="4" border="0" alt=""></td>
	</tr>
</table>
</div><!-- === /mainArea === -->
<!-- === footerArea === -->
<div id="footerArea">
<jsp:include page="/common/include/footer.jsp" />
</div><!-- === /footerArea === -->
</body>
</html>
<!-- System Architect is COOBA Corp
	Copyright 2010 COOBA Corp All rights reserved -->